<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
        .red{
            background-color: rgb(240, 127, 127);
        }
        .green{
            background-color: aquamarine;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="head">head</div>
    
</body>
<script>
    // 在页面插入一个节点
    // 1.创建一个节点
    var box = document.createElement('div');
    // 2.给元素添加一个class
    box.classList.add('box')
    // 3.定位到body
    // var body = document.body
    var body = document.querySelector('body')
    //4.放入body，append放入里面的最后面
    // body.append(box)
    // body.prepend(box)
    var head = document.querySelector('.head');
    // head.before(box)
    head.after(box)
    // 属性控制，增，删，改，查
    box.setAttribute('title','我是一个盒子')
    box.removeAttribute('title')
    box.hasAttribute('title')
    box.getAttribute('title')
    //类操作，增，删，改，查
    // <div class="box red"></div>
    box.classList.add('red')
    //box.classList.remove('red')
    box.classList.contains('red')
    //内容操作
    box.innerText //获取内部的所有文本
    box.innerText = "插入一段文字" //设置文本
    box.innerHTML //获取内部的所有html
    box.innerHTML = "<p>段落</p>"
    //样式操作，不会改变css，会操作节点的style属性，也就是行内样式
    // box.style.backgroundColor = "yellow"
    //对于样式的控制，我们一般推荐使用calssList的修改来控制样式i，而不是直接设置style
    box.classList.remove('red')
    box.classList.add('yellow')

    //删除节点
    box.remove()

    


</script>

</html>